<template>
  <div>
    <AmoAYunMonacoEditorVue3
      v-model="content"
      language="javascript"
      style="width: 100%; height: 400px"
      ref="editor"
    />
    <button @click="handleInsert">Insert Content</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { AmoAYunMonacoEditorVue3 } from '@amoayun/monaco-editor-vue3'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'

self.MonacoEnvironment = {
  getWorker(_, label) {
    switch (label) {
      case 'json':
        return new jsonWorker()
      case 'css':
      case 'scss':
      case 'less':
        return new cssWorker()
      case 'html':
      case 'handlebars':
      case 'razor':
        return new htmlWorker()
      case 'typescript':
      case 'javascript':
        return new tsWorker()
      default:
        return new editorWorker()
    }
  }
}

const content = ref('')
const editor = ref(null)

const handleInsert = () => {
  editor.value.insertText('hello world')
}
</script>
